
.dropdown-field {
	@include noselect();
	font-size: 13px;
	font-weight: 500;
	font-family: $font-family-alt;
	position: relative;
	display: inline-block;

	&__label {
		display: flex;
		font-weight: 800;

		&__name {
			display: none;
		}

		.icon {
			padding-right: 8px;
		}

		&:not(.button) {
			@include animate();
			padding: 14px 10px;
			cursor: pointer;

			.notouch &:hover {
				color: colour('blue');
			}
		}
	}

	&--expanded {
		.label:not(.button) {
			color: colour('blue');
		}
		.dropdown-field__options {
			display: block;
		}
	}

	&--no-status-icon {
		.dropdown-field__options {
			&__item {
				padding-left: 12px;
			}
		}
	}

	&--no-label {
		.label > .text {
			display: none;
		}
	}

	&__options {
		position: absolute;
		top: 46px;
		right: 10px;
		z-index: 97;
		display: none;
		box-shadow: 2px 3px 6px rgba(0,0,0,0.2);

		&:before {
			content: '';
			display: block;
			width: 6px;
			height: 6px;
			background: colour('white');
			-ms-transform: rotate(45deg);
			-webkit-transform: rotate(45deg);
			transform: rotate(45deg);
			position: absolute;
			top: -3px;
			right: 9px;

			@include theme('light') {
				background: colour('white');
			}
		}

		&__liner {
			color: colour('black');
			background: colour('white');
			min-width: 120px;
			max-height: 70vh;
			overflow-y: auto;
			border-radius: 3px;

			@include theme('light') {
				background: colour('white');
			}
		}

		&__item {
			@include animate();
			@include gradient_overlay(3px);
			position: relative;
			padding: 9px 12px 8px 24px;
			cursor: pointer;
			color: colour('darkest_grey');

			.icon {
				position: absolute;
				top: 8px;
				left: 6px;
				font-size: 16px;
			}

			.notouch &:hover {
				color: colour('darkest_grey');

				&:before {
					opacity: 0.15;
				}
			}
		}
	}
}

#context-menu {
	.dropdown-field {
		padding: 16px 0;
		display: block;

		&:active,
		&:focus {
			background: none !important;
		}

		&__label {
			padding: 0 0 12px 0;
			opacity: 0.5;
			font-size: 1rem;
			display: block;
			cursor: default;
			text-transform: uppercase;

			&__value {
				display: none;
			}

			&__name {
				display: inline-block;
			}

			&,
			&:hover {
				color: colour('white');

				@include theme('light') {
					color: colour('dark_grey') !important;
				}
			}
		}

		&__options {
			display: block;
			position: static;
			width: 50%;
			margin: 0 auto;
			background: transparent;
			border-radius: 0;
			border: 0;
			box-shadow: none;
			font-weight: 700;
			font-size: 1.2rem;

			&:before {
				display: none !important;
			}

			&__liner {
				background: transparent;
				color: colour('white') !important;
				margin: -3px -5px;

				@include theme('light') {
					color: colour('dark_grey') !important;
				}

				&:before {
					display: none !important;
				}
			}

			&__item {
				@include click_feedback();
				display: block;
				padding: 3px 5px;
				border-radius: 0;
				color: colour('white') !important;

				@include theme('light') {
					color: colour('dark_grey') !important;
				}

				&:before {
					display: none !important;
				}

				.icon {
					display: inline-block;
					position: absolute;
					left: 0;
					padding-bottom: 3px;
					font-size: 0.9em;
				}
			}
		}
	}
}
